<template>
  <div class="change">
    <p>修改密码</p>
    <p>id: {{ id }}</p>
    <p>username: {{ username }}</p>
    <p>nickname: {{ nickname }}</p>
    <p>
      <el-input type="text" v-model="password"></el-input>
    </p>
  </div>
</template>

<script>
export default {
    name: 'UserPasswordView',
    data(){
      return {
        id: '',
        username: '',
        nickname: '',
        password: ''
      }
    },
    created(){
      // 通过浏览器提供的支持来发起异步请求
      let promise = fetch( '/users.json');
      promise.then( resp => {
        return resp.json();
      }).then( users => {
        let user = users.find( u => u.id == this.$route.params.id );
        this.id = user.id ;
        this.username = user.username ;
        this.nickname = user.nickname ;
        this.password = user.password ;
      });
    }
}
</script>

<style>
.change {
  background: #fff;
}
</style>